<template>
  <div class="echartsRef" ref="echartsRef"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted, onUnmounted, withDefaults } from 'vue'
interface Props {
  option: any
}
const { option } = withDefaults(defineProps<Props>(), {
  option: null
})
const echartsRef = ref<HTMLElement>()
let echartsContainer: echarts.ECharts | null = null
const listener = () => {
  echartsContainer?.resize()
}
onMounted(() => {
  echartsContainer = echarts.init(echartsRef.value)
  echartsContainer.setOption(option)
  window.addEventListener('resize', listener)
})
onUnmounted(() => {
  window.removeEventListener('resize', listener)
})
</script>
<style>
.echartsRef {
  width: 100%;
  height: 100%;
}
</style>
